import React, { Component } from 'react';
import store from './store' 
import {
  changeInputAction, 
  clickBtnAction,
  itemClickAction,
  queryData
} from './store/actionCreators'
import TodoListUI from './TodoListUI';


class TodoList extends Component {
  
  constructor(props) {
    super(props)
    this.state = store.getState()
    this.changeInputValue = this.changeInputValue.bind(this)
    this.storeChange = this.storeChange.bind(this)
    this.clickBtn = this.clickBtn.bind(this)
    this.itemClick = this.itemClick.bind(this)
    store.subscribe(this.storeChange)
  }

  render() { 
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        changeInputValue={this.changeInputValue}
        clickBtn={this.clickBtn}
        list={this.state.list}
        itemClick={this.itemClick}
      ></TodoListUI>
    );
  }

  componentDidMount() {
    store.dispatch(queryData())
  }

  changeInputValue(e) {
    store.dispatch(changeInputAction(e.target.value))
  }

  clickBtn() {
    store.dispatch(clickBtnAction(this.state.inputValue))
  }

  itemClick(index) {
    store.dispatch(itemClickAction(index))
  }

  storeChange() {
    // 改变状态
    this.setState(store.getState())
  }
}
 
export default TodoList;